<template>
	<view class="my-category">
		<view class="category-top">
			<!-- 左边 -->
			<text class="title">精选分类</text>
			<!-- 右边 -->
			<view class="read">
				<text class="more">{{more}}</text>
				<image src="../../static/r-arrow.png" class="arrow"></image>
			</view>
		</view>
		<view class="category-box">
			<view v-for="(item, index) in categories_1" :key="index" class="category-item"
				@click="handleCategoryTap(item.name)">
				<!-- 绝对路径 -->
				<image class="img" :src="'/' + item.imgPath"></image>
				<view class="txt" style="transform: translate(0,-39%);">{{item.name}}</view>
			</view>
		</view>
	</view>

	<view class="my-category">
		<view class="category-top">
			<!-- 左边 -->
			<text class="title">人气榜单</text>
			<!-- 右边 -->
			<view class="read">
				<text class="more">{{more}}</text>
				<image src="../../static/r-arrow.png" class="arrow"></image>
			</view>
		</view>

		<view class="category-box">
			<view v-for="(item, index) in categories_2" :key="index" class="category-item"
				@click="handleCategoryTap(item.text)">
				<image class="image" :src="'/' + item.imagePath"></image>
				<text class="text">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyCategory",
		data() {
			return {
				more: "查看更多",
				
				categories_1: 
				[
					{
						name: '女频热书',
						imgPath: 'static/circle1.png',
					},
					{
						name: '男频佳作',
						imgPath: 'static/circle2.png',
					},
					{
						name: '热门影视',
						imgPath: 'static/circle3.png',
					},
					{
						name: '经典中外',
						imgPath: 'static/circle4.png',
					},
				],
				categories_2: 
				[
					{
						text: '平行之境',
						imagePath: 'static/book1.png',
					},
					{
						text: '中国历史',
						imagePath: 'static/book2.png',
					},
					{
						text: '平凡的伟大',
						imagePath: 'static/book3.png',
					}
				]
			};
		},
		methods: {
			handleCategoryTap(name) {
				console.log('点击了分类：', name);
				// 这里可以添加跳转或其他处理逻辑
			}
		}
	}
</script>

<style lang="scss">
	.my-category {
		margin: 20rpx 0;

		.category-top {
			width: 100%;
			position: relative;

			// 左
			.title {
				font-size: 36rpx;
				font-weight: bold;
				/* margin: 20px 0; */
			}

			// 右
			.read {
				position: absolute;
				top: 0;
				right: 0;
				// background-color: pink;

				.more {
					font-size: 24rpx;
					color: #999;
				}

				.arrow {
					width: 30rpx;
					height: 30rpx;
					padding-left: 2rpx;
					// 微调位置
					transform: translate(0%, 18%);
				}

			}

		}

		.category-box {
			display: flex;
			/* flex-wrap: wrap; */
		}

		.category-item {
			width: 50%;
			/* 控制每个类别项的宽度 */
			margin-top: 10rpx;
			margin-right: 10rpx;
			text-align: center;
		}

		/* 精选分类 */
		.img {
			width: 160rpx;
			height: 160rpx;
			/* background-color: pink; */
			border-radius: 50%;
		}

		.txt {
			font-size: 28rpx;
		}

		/* 人气榜单 */
		.image {
			width: 200rpx;
			height: 300rpx;
			margin-top: 10rpx;
		}

		.text {
			font-size: 28rpx;
		}

	}
</style>